<template>
  <div>
    <CodeCard v-bind="btnDesc">
      <sdn-input class="demo" v-model="input" placeholder="请输入内容"></sdn-input>
      <template #annotation></template>
    </CodeCard>
  </div>
</template>

<script>


export default {
  components: {
    
  },
  data() {
    return {
      input: ''
    }
  },
  methods: {},
  setup() {
    const btnDesc = {
      title: "Input 输入框",
      describe: "通过鼠标或键盘输入字符。",
      codeBlock: `<sdn-input className="demo" v-model="input" placeholder="请输入内容"></sdn-input>`,
      attrs: [
        {
          "name": "type",
          "describe": "类型",
          "type": "string",
          "emun": "text，textarea 和其他 原生 input 的 type 值",
          "default": "text"
        }, {
          "name": "value / v-model",
          "describe": "绑定值",
          "type": "string / number",
          "emun": "—",
          "default": "—"
        }, {
          "name": "maxlength",
          "describe": "原生属性，最大输入长度",
          "type": "number",
          "emun": "—",
          "default": "—"
        }, {
          "name": "minlength",
          "describe": "原生属性，最小输入长度",
          "type": "number",
          "emun": "—",
          "default": "—"
        }, {
          "name": "show-word-limit",
          "describe": "是否显示输入字数统计，只在 type = \"text\" 或 type = \"textarea\" 时有效",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "placeholder",
          "describe": "输入框占位文本",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "clearable",
          "describe": "是否可清空",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "show-password",
          "describe": "是否显示切换密码图标",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {"name": "disabled", "describe": "禁用", "type": "boolean", "emun": "—", "default": "FALSE"}, {
          "name": "size",
          "describe": "输入框尺寸，只在 type!=\"textarea\" 时有效",
          "type": "string",
          "emun": "medium / small / mini",
          "default": "—"
        }, {
          "name": "prefix-icon",
          "describe": "输入框头部图标",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {"name": "suffix-icon", "describe": "输入框尾部图标", "type": "string", "emun": "—", "default": "—"}, {
          "name": "rows",
          "describe": "输入框行数，只对 type=\"textarea\" 有效",
          "type": "number",
          "emun": "—",
          "default": "2"
        }, {
          "name": "autosize",
          "describe": "自适应内容高度，只对 type=\"textarea\" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }",
          "type": "boolean / object",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "autocomplete",
          "describe": "原生属性，自动补全",
          "type": "string",
          "emun": "on, off",
          "default": "off"
        }, {
          "name": "auto-complete",
          "describe": "下个主版本弃用",
          "type": "string",
          "emun": "on, off",
          "default": "off"
        }, {"name": "name", "describe": "原生属性", "type": "string", "emun": "—", "default": "—"}, {
          "name": "readonly",
          "describe": "原生属性，是否只读",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {"name": "max", "describe": "原生属性，设置最大值", "type": "—", "emun": "—", "default": "—"}, {
          "name": "min",
          "describe": "原生属性，设置最小值",
          "type": "—",
          "emun": "—",
          "default": "—"
        }, {
          "name": "step",
          "describe": "原生属性，设置输入字段的合法数字间隔",
          "type": "—",
          "emun": "—",
          "default": "—"
        }, {
          "name": "resize",
          "describe": "控制是否能被用户缩放",
          "type": "string",
          "emun": "none, both, horizontal, vertical",
          "default": "—"
        }, {
          "name": "autofocus",
          "describe": "原生属性，自动获取焦点",
          "type": "boolean",
          "emun": "true, false",
          "default": "FALSE"
        }, {"name": "form", "describe": "原生属性", "type": "string", "emun": "—", "default": "—"}, {
          "name": "label",
          "describe": "输入框关联的label文字",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "tabindex",
          "describe": "输入框的tabindex",
          "type": "string",
          "emun": "-",
          "default": "-"
        }, {"name": "validate-event", "describe": "输入时是否触发表单的校验", "type": "boolean", "emun": "-", "default": "TRUE"}],
      events: [
        {"name": "blur", "describe": "在 Input 失去焦点时触发", "params": "(event: Event)"}, {
          "name": "focus",
          "describe": "在 Input 获得焦点时触发",
          "params": "(event: Event)"
        }],
      slots: [
        {"name": "prefix", "describe": "输入框头部内容，只对 type=\"text\" 有效"}, {
          "name": "suffix",
          "describe": "输入框尾部内容，只对 type=\"text\" 有效"
        }, {"name": "prepend", "describe": "输入框前置内容，只对 type=\"text\" 有效"}, {
          "name": "append",
          "describe": "输入框后置内容，只对 type=\"text\" 有效"
        }],
      methods: [
        {"name": "focus", "describe": "使 input 获取焦点", "params": "—"}, {
          "name": "blur",
          "describe": "使 input 失去焦点",
          "params": "—"
        }, {"name": "select", "describe": "选中 input 中的文字", "params": "—"}]
    };
    return {
      btnDesc,
    };
  },
};
</script>

<style scoped>
.demo {
  margin-bottom: 0.1rem;
  max-width: 50%;
}
</style>
